<template>
  <f7-page class="center-body6">
    <div class="header-f7">
      <f7-link back icon-material="chevron_left" class="f7-link"></f7-link>
    </div>
    <f7-block class="header">
      <!-- 小齿轮 -->
      <f7-row class="set-button">
        <a href="/ui/set/index"
          ><img src="static/img/center/index6/icon-nav-me1.png" alt=""
        /></a>
      </f7-row>
      <!-- 头像 -->
      <f7-block class="my-name">
        <f7-col class="my-news">
          <img src="static/img/center/man-png.png" alt="" class="portrait" />
          <!-- 名字个信息 -->
          <f7-nav-title class="my-name2">
            <f7-block-title class="name">热乾面</f7-block-title>
            <f7-block class="my-id">楼层终究误少年</f7-block>
          </f7-nav-title>
        </f7-col>
      </f7-block>
      <!-- 我的钱包 -->
      <f7-card class="header-appointment">
        <f7-list class="f7-list">
          <qm-field label="我的钱包" is-link readonly :radius="16"> </qm-field>
        </f7-list>
        <ul class="header-ul">
          <li>
            <div class="header-order-title">324</div>
            今日收入
          </li>
          <li>
            <div class="header-order-title">20</div>
            本月订单
          </li>
          <li>
            <div class="header-order-title">864</div>
            我的余额
          </li>
        </ul>
      </f7-card>
      <!-- 中间图片 -->
      <f7-block class="project">
        <img
          src="static/img/center/index6/icon-nav-me2.png"
          alt=""
          class="project-img"
        />
      </f7-block>
      <f7-card class="header-appointment">
        <f7-list>
          <f7-list-item
            :link="item.href"
            :title="item.title"
            class="f7-list"
            v-for="(item, index) in list"
            :key="index"
            :after="item.after"
          >
            <f7-icon slot="media">
              <img :src="item.image" alt="" />
            </f7-icon>
          </f7-list-item>
        </f7-list>
      </f7-card>
      <div style="width: 100%; height: 60px"></div>
    </f7-block>
    <!-- 底部导航栏 -->

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      title: "myself",
      list: [
        {
          title: "收藏资讯",
          image: "static/img/center/index6/icon-me-shoucang.svg",
          href: "/ui/center/index6",
        },
        {
          title: "物业管理",
          image: "static/img/center/index6/icon-me-guanli.svg",
          href: "/ui/center/index2",
        },
        {
          title: "绑定手机",
          image: "static/img/center/index6/icon-me-dianhua.svg",
          href: "/ui/center/index2",
        },
        {
          title: "意见反馈",
          image: "static/img/center/index6/icon-me-yijian.svg",
          href: "/ui/center/index2",
        },
        {
          title: "关于我们",
          image: "static/img/center/index6/icon-me-guanyu.svg",
          href: "/ui/center/index2",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.center-body6 {
  background-color: var(--color-fill-background);
  width: 100%;
  height: 100%;
  position: relative;
  .header-f7 {
    position: absolute;
    top: 1%;
    left: 5%;
    z-index: 3;
    .f7-link {
      color: black;
    }
  }
  .header {
    margin: 0px;
    padding: 0px;
    background: url("../../../../static/img/center/index5/icon-nav-me1.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: local;
    width: 100%;
    height: calc(499px * var(--ratio));

    .set-button {
      padding-top: calc(32px * var(--ratio));
      justify-content: flex-end;
      margin-right: calc(32px * var(--ratio));

      img {
        width: calc(36px * var(--ratio));
        height: calc(36px * var(--ratio));
      }
    }

    .my-name {
      display: flex;
      margin: 0px 0px calc(60px * var(--ratio)) 0px;
      justify-content: space-between;
      text-align: center;
      padding: 0px;

      .my-news {
        display: flex;
        text-align: left;

        .portrait {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-left: calc(44px * var(--ratio));
        }

        .my-name2 {
          margin-left: calc(22px * var(--ratio));

          .name {
            font-size: calc(44px * var(--ratio));
            color: #2a436b;
            font-weight: 600;
            margin: 0px;
            padding: 0px;
            line-height: 32px;
          }

          .my-id {
            font-size: var(--font-size-subcontent-2);
            color: #546986;
            margin: 0px;
            padding: 0px;
          }
        }
      }
    }

    .header-appointment {
      margin: 0px calc(32px * var(--ratio)) calc(20px * var(--ratio));
      background-color: var(--color-fill-grey-inverse);
      border-radius: 7px;
      --f7-card-box-shadow: 0px;
      .item-media {
        min-width: 0px;
        margin-right: calc(27px * var(--ratio));
      }
      .f7-list {
        --f7-list-border-color: var(-color-fill-grey-inverse);
        --f7-list-item-border-color: var(-color-fill-grey-inverse);
        --f7-list-item-media-margin: 0px;
        --f7-list-margin-vertical: 0px;
        --f7-list-item-padding-vertical: 13px;
        --f7-list-item-title-font-size: var(--font-size-maincontent);
        --f7-list-item-after-font-size: 10px;
        --f7-list-item-after-text-color: var(--color-text-subtext);
        line-height: 15px;
        color: var(--color-text-title);
        font-weight: 400;
        padding-top: 6px;
        border-radius: calc(16px * var(--ratio));
        /deep/ .van-field__label {
          font-size: calc(33px * var(--ratio));
          color: var(--color-text-title);
          font-weight: 500;
        }
        .item-inner:before {
          color: #ced6e0;
        }
        ul {
          border-radius: 7px;
        }
        img {
          width: calc(48px * var(--ratio));
          height: calc(48px * var(--ratio));
        }
      }

      .header-ul {
        display: flex;
        justify-content: space-around;
        text-align: center;
        line-height: 23px;
        color: var(--color-text-subtext);
        font-size: var(--font-size-subcontent-2);
        padding-bottom: calc(32px * var(--ratio));

        .header-order-title {
          font-size: calc(44px * var(--ratio));
          color: var(--color-text-title);
          font-weight: 600;
        }
      }
    }

    .project {
      margin: 0px;
      padding: 0px 10px;

      .project-img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .footer::after {
    background: var(--color-fill-grey-inverse);
    box-shadow: 4px -1px 12px 3px #0000000a;
  }
}
</style>
